<template>
  <div class="hotcate">
    <h1>热门分类</h1>
    <van-grid :column-num="4" :border="false">
      <van-grid-item
        v-for="d in data"
        :key="d.title"
        :icon="d.img"
        :text="d.title"
      />
    </van-grid>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Grid, GridItem } from 'vant'
  Vue.use(Grid).use(GridItem)
  
  export default {
    props: ['data']
  }
</script>

<style lang="scss" scoped>
@import '@/assets/border.scss';

.hotcate {
  height: 4.04rem;
  h1 {
    @include border_1px(0px 0px 1px 0px)
  }
}
</style>